<script setup>
import api from '../api/index.js'
import { ref } from 'vue';

let userinfo = ref({});

api.user.userinfo().then(res => {
    console.log(res);
    if (res.code === 200) {
        userinfo.value = res.data;
        console.log(userinfo.value);
    } else {
        console.log(res.msg);
    }
}).catch(err => {
    console.error(err);
});

function logout() {
    api.logout().then(res => {
        console.log(res);
        if (res.code === 200) {
            console.log(res.data);
        } else {
            console.log(res.msg);
        }
    }).catch(err => {
        console.error(err);
    });
}

</script>

<template>
    <div class="common-layout">
        <el-container>
        <el-header>
            <el-row justify="space-between" align="middle">
                <el-col :span="12">
                    <h1>数据中心</h1>
                </el-col>
                <el-col :span="12" class="text-right">
                    <el-dropdown placement="bottom">
                        <el-avatar :src="userinfo.avatar">{{userinfo.name}}</el-avatar>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="logout">
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
          <el-aside>
            <el-menu default-active="1" class="el-menu-vertical-demo" style="width: 200px;">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">数据管理</el-menu-item>
                <el-menu-item index="3">用户管理</el-menu-item>
                <el-menu-item index="4">系统设置</el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <el-row justify="center" align="middle" class="full-screen text-center">
                <el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="6">
                    <h1>欢迎使用数据中心管理后台</h1>
                    <el-button type="primary" style="width: 100%;" @click="logout">退出登录</el-button>
                </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<style scoped>

.common-layout {
    height: 100vh;
    padding: 25px 15px;
}

.text-right {
    text-align: right;
}

.el-avatar {
    background-color: cornflowerblue;
}

el-menu-item {
    text-align: center;
}

</style>
